<template>
    <div class="customer-stats">
      <div class="stats-tables">
        <div class="table-section">
          <div class="table-header">
            <h3>热门省份TOP10</h3>
            <el-radio-group v-model="provinceTimeRange" size="small">
              <el-radio-button label="today">今天</el-radio-button>
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="provinceData" style="width: 100%">
            <el-table-column prop="name" label="省份名称" />
            <el-table-column prop="count" label="会员数量" align="right" />
          </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CustomerStats',
    data() {
      return {
        provinceTimeRange: 'today',
        provinceData: [
          { name: '北京', count: 2088 },
          { name: '上海', count: 2182 },
          { name: '广州', count: 1988 },
          { name: '四川', count: 3247 },
          { name: '湖北', count: 2133 },
          { name: '辽宁', count: 1213 },
          { name: '山东', count: 872 },
          { name: '河北', count: 288 },
          { name: '山西', count: 192 },
          { name: '吉林', count: 290 }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .customer-stats {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
  }
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
  }
  
  .stats-card {
    background: #F9FAFB;
    border-radius: 8px;
    padding: 20px;
  }
  
  .stats-card .title {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 16px;
  }
  
  .stats-card .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  
  .stats-card .data {
    display: flex;
    align-items: baseline;
  }
  
  .stats-card .number {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin-right: 8px;
  }
  
  .stats-card .unit {
    font-size: 14px;
    color: #6B7280;
  }
  
  .table-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .table-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0;
  }
  
  :deep(.el-radio-button__inner) {
    background: #F3F4F6;
    border: none;
    color: #6B7280;
  }
  
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background: #8B5CF6;
    color: white;
    box-shadow: none;
  }
  
  :deep(.el-table) {
    font-size: 14px;
  }
  
  :deep(.el-table th) {
    background: #F9FAFB;
    color: #374151;
    font-weight: 500;
  }
  
  :deep(.el-table td) {
    color: #6B7280;
  }
  </style>